{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>Color</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p><code>$.zui.Color</code> 是一个颜色辅助类，可以方便的实现对颜色的转换和计算。</p></article>





<section><header><h3>创建 Color 实例</h3></header><article><p>可用的构造方法形式如下：</p><ul>
<li><code>new $.zui.Color()</code></li>
<li><code>new $.zui.Color(hexStr)</code></li>
<li><code>new $.zui.Color(r, g, b)</code></li>
<li><code>new $.zui.Color(r, g, b, a)</code></li>
<li><code>new $.zui.Color(rgbaColor)</code></li>
<li><code>new $.zui.Color(hslaColor)</code></li>
<li><code>new $.zui.Color(name)</code></li>
</ul><p>参数定义如下：</p><ul>
<li><code>hexStr</code>，16 进制颜色值字符串，需要包括 <code>'#'</code> 前缀；</li>
<li><code>r</code>，RGB 颜色模型的 R 分量，取值范围 <code>0 ~ 255</code>；</li>
<li><code>g</code>，RGB 颜色模型的 G 分量，取值范围 <code>0 ~ 255</code>；</li>
<li><code>b</code>，RGB 颜色模型的 B 分量，取值范围 <code>0 ~ 255</code>；</li>
<li><code>a</code>，颜色透明度，取值范围 <code>0 ~ 1</code>；</li>
<li><code>rgbaColor</code>，一个对象来使用 RGB 颜色模型设定颜色，例如 <code>{r: 255, g: 0, b: 255, a: 1}</code>，其中 <code>a</code> 代表透明度，可以省略，默认为 <code>1</code>；</li>
<li><code>hslaColor</code>，一个对象来使用 HSL 颜色模型设定颜色，例如 <code>{h: 350, s: 0.5, l: 0.9, a: 1}</code>，其中 <code>h</code> 取值范围为 <code>0 ~ 359</code>，<code>s</code> 和 <code>l</code> 取值范围为 <code>0 ~ 1</code>，其中 <code>a</code> 代表透明度，可以省略，默认为 <code>1</code>；</li>
<li><code>name</code>，颜色英文名称，所有在 <code>$.zui.Color.names</code> 定义的命名颜色都支持，例如 <code>'red'</code>；</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">var</span><span class="pln"> myColor </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Color</span><span class="pun">(</span><span class="str">'#095823'</span><span class="pun">);</span></code></pre></article></section>








<style>
#namedColors .color-tile {height: auto; width: 125px; padding: 0 5px; margin: 0; border: none;}
</style>

<script>
$(function() {
    var $colors = $('<div class="clearfix"></div>');
    $.each($.zui.Color.names, function(name, hex) {
        var color = new $.zui.Color(hex);
        $colors.append($('<div class="color-tile"></div>').css({
            background: hex,
            color: color.contrast().toCssStr()
        }).text(name));
    });
    $('#namedColors').append($colors);
});
</script>

<section><header><h3>类方法和属性</h3></header><article><h4>判断字符串是否是有效的颜色表达式。</h4><ul>
<li><code>$.zui.Color.isColor(str)</code></li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">var</span><span class="pln"> isColor </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Color</span><span class="pun">.</span><span class="pln">isColor</span><span class="pun">(</span><span class="str">'#2343x'</span><span class="pun">);</span><span class="pln"> </span><span class="com">// '#2343x' 不是有效的颜色值</span></code></pre><h4>获取所有命名颜色值</h4><ul>
<li><code>$.zui.Color.names</code></li>
</ul><p>所有命名颜色有：</p><div id="namedColors" class="example">
<div class="clearfix"><div class="color-tile" style="background: rgb(240, 248, 255); color: rgb(0, 0, 0);">aliceblue</div><div class="color-tile" style="background: rgb(250, 235, 215); color: rgb(0, 0, 0);">antiquewhite</div><div class="color-tile" style="background: rgb(0, 255, 255); color: rgb(0, 0, 0);">aqua</div><div class="color-tile" style="background: rgb(127, 255, 212); color: rgb(0, 0, 0);">aquamarine</div><div class="color-tile" style="background: rgb(240, 255, 255); color: rgb(0, 0, 0);">azure</div><div class="color-tile" style="background: rgb(245, 245, 220); color: rgb(0, 0, 0);">beige</div><div class="color-tile" style="background: rgb(255, 228, 196); color: rgb(0, 0, 0);">bisque</div><div class="color-tile" style="background: rgb(0, 0, 0); color: rgb(255, 255, 255);">black</div><div class="color-tile" style="background: rgb(255, 235, 205); color: rgb(0, 0, 0);">blanchedalmond</div><div class="color-tile" style="background: rgb(0, 0, 255); color: rgb(255, 255, 255);">blue</div><div class="color-tile" style="background: rgb(138, 43, 226); color: rgb(255, 255, 255);">blueviolet</div><div class="color-tile" style="background: rgb(165, 42, 42); color: rgb(255, 255, 255);">brown</div><div class="color-tile" style="background: rgb(222, 184, 135); color: rgb(0, 0, 0);">burlywood</div><div class="color-tile" style="background: rgb(95, 158, 160); color: rgb(255, 255, 255);">cadetblue</div><div class="color-tile" style="background: rgb(127, 255, 0); color: rgb(0, 0, 0);">chartreuse</div><div class="color-tile" style="background: rgb(210, 105, 30); color: rgb(255, 255, 255);">chocolate</div><div class="color-tile" style="background: rgb(255, 127, 80); color: rgb(255, 255, 255);">coral</div><div class="color-tile" style="background: rgb(100, 149, 237); color: rgb(255, 255, 255);">cornflowerblue</div><div class="color-tile" style="background: rgb(255, 248, 220); color: rgb(0, 0, 0);">cornsilk</div><div class="color-tile" style="background: rgb(220, 20, 60); color: rgb(255, 255, 255);">crimson</div><div class="color-tile" style="background: rgb(0, 255, 255); color: rgb(0, 0, 0);">cyan</div><div class="color-tile" style="background: rgb(0, 0, 139); color: rgb(255, 255, 255);">darkblue</div><div class="color-tile" style="background: rgb(0, 139, 139); color: rgb(255, 255, 255);">darkcyan</div><div class="color-tile" style="background: rgb(184, 134, 11); color: rgb(255, 255, 255);">darkgoldenrod</div><div class="color-tile" style="background: rgb(169, 169, 169); color: rgb(255, 255, 255);">darkgray</div><div class="color-tile" style="background: rgb(0, 100, 0); color: rgb(255, 255, 255);">darkgreen</div><div class="color-tile" style="background: rgb(189, 183, 107); color: rgb(0, 0, 0);">darkkhaki</div><div class="color-tile" style="background: rgb(139, 0, 139); color: rgb(255, 255, 255);">darkmagenta</div><div class="color-tile" style="background: rgb(85, 107, 47); color: rgb(255, 255, 255);">darkolivegreen</div><div class="color-tile" style="background: rgb(255, 140, 0); color: rgb(255, 255, 255);">darkorange</div><div class="color-tile" style="background: rgb(153, 50, 204); color: rgb(255, 255, 255);">darkorchid</div><div class="color-tile" style="background: rgb(139, 0, 0); color: rgb(255, 255, 255);">darkred</div><div class="color-tile" style="background: rgb(233, 150, 122); color: rgb(255, 255, 255);">darksalmon</div><div class="color-tile" style="background: rgb(143, 188, 143); color: rgb(0, 0, 0);">darkseagreen</div><div class="color-tile" style="background: rgb(72, 61, 139); color: rgb(255, 255, 255);">darkslateblue</div><div class="color-tile" style="background: rgb(47, 79, 79); color: rgb(255, 255, 255);">darkslategray</div><div class="color-tile" style="background: rgb(0, 206, 209); color: rgb(0, 0, 0);">darkturquoise</div><div class="color-tile" style="background: rgb(148, 0, 211); color: rgb(255, 255, 255);">darkviolet</div><div class="color-tile" style="background: rgb(255, 20, 147); color: rgb(255, 255, 255);">deeppink</div><div class="color-tile" style="background: rgb(0, 191, 255); color: rgb(0, 0, 0);">deepskyblue</div><div class="color-tile" style="background: rgb(105, 105, 105); color: rgb(255, 255, 255);">dimgray</div><div class="color-tile" style="background: rgb(30, 144, 255); color: rgb(255, 255, 255);">dodgerblue</div><div class="color-tile" style="background: rgb(178, 34, 34); color: rgb(255, 255, 255);">firebrick</div><div class="color-tile" style="background: rgb(255, 250, 240); color: rgb(0, 0, 0);">floralwhite</div><div class="color-tile" style="background: rgb(34, 139, 34); color: rgb(255, 255, 255);">forestgreen</div><div class="color-tile" style="background: rgb(255, 0, 255); color: rgb(255, 255, 255);">fuchsia</div><div class="color-tile" style="background: rgb(220, 220, 220); color: rgb(0, 0, 0);">gainsboro</div><div class="color-tile" style="background: rgb(248, 248, 255); color: rgb(0, 0, 0);">ghostwhite</div><div class="color-tile" style="background: rgb(255, 215, 0); color: rgb(0, 0, 0);">gold</div><div class="color-tile" style="background: rgb(218, 165, 32); color: rgb(255, 255, 255);">goldenrod</div><div class="color-tile" style="background: rgb(128, 128, 128); color: rgb(255, 255, 255);">gray</div><div class="color-tile" style="background: rgb(0, 128, 0); color: rgb(255, 255, 255);">green</div><div class="color-tile" style="background: rgb(173, 255, 47); color: rgb(0, 0, 0);">greenyellow</div><div class="color-tile" style="background: rgb(240, 255, 240); color: rgb(0, 0, 0);">honeydew</div><div class="color-tile" style="background: rgb(255, 105, 180); color: rgb(255, 255, 255);">hotpink</div><div class="color-tile" style="background: rgb(205, 92, 92); color: rgb(255, 255, 255);">indianred</div><div class="color-tile" style="background: rgb(75, 0, 130); color: rgb(255, 255, 255);">indigo</div><div class="color-tile" style="background: rgb(255, 255, 240); color: rgb(0, 0, 0);">ivory</div><div class="color-tile" style="background: rgb(240, 230, 140); color: rgb(0, 0, 0);">khaki</div><div class="color-tile" style="background: rgb(230, 230, 250); color: rgb(0, 0, 0);">lavender</div><div class="color-tile" style="background: rgb(255, 240, 245); color: rgb(0, 0, 0);">lavenderblush</div><div class="color-tile" style="background: rgb(124, 252, 0); color: rgb(0, 0, 0);">lawngreen</div><div class="color-tile" style="background: rgb(255, 250, 205); color: rgb(0, 0, 0);">lemonchiffon</div><div class="color-tile" style="background: rgb(173, 216, 230); color: rgb(0, 0, 0);">lightblue</div><div class="color-tile" style="background: rgb(240, 128, 128); color: rgb(255, 255, 255);">lightcoral</div><div class="color-tile" style="background: rgb(224, 255, 255); color: rgb(0, 0, 0);">lightcyan</div><div class="color-tile" style="background: rgb(250, 250, 210); color: rgb(0, 0, 0);">lightgoldenrodyellow</div><div class="color-tile" style="background: rgb(211, 211, 211); color: rgb(0, 0, 0);">lightgray</div><div class="color-tile" style="background: rgb(144, 238, 144); color: rgb(0, 0, 0);">lightgreen</div><div class="color-tile" style="background: rgb(255, 182, 193); color: rgb(0, 0, 0);">lightpink</div><div class="color-tile" style="background: rgb(255, 160, 122); color: rgb(0, 0, 0);">lightsalmon</div><div class="color-tile" style="background: rgb(32, 178, 170); color: rgb(255, 255, 255);">lightseagreen</div><div class="color-tile" style="background: rgb(135, 206, 250); color: rgb(0, 0, 0);">lightskyblue</div><div class="color-tile" style="background: rgb(119, 136, 153); color: rgb(255, 255, 255);">lightslategray</div><div class="color-tile" style="background: rgb(176, 196, 222); color: rgb(0, 0, 0);">lightsteelblue</div><div class="color-tile" style="background: rgb(255, 255, 224); color: rgb(0, 0, 0);">lightyellow</div><div class="color-tile" style="background: rgb(0, 255, 0); color: rgb(0, 0, 0);">lime</div><div class="color-tile" style="background: rgb(50, 205, 50); color: rgb(0, 0, 0);">limegreen</div><div class="color-tile" style="background: rgb(250, 240, 230); color: rgb(0, 0, 0);">linen</div><div class="color-tile" style="background: rgb(255, 0, 255); color: rgb(255, 255, 255);">magenta</div><div class="color-tile" style="background: rgb(128, 0, 0); color: rgb(255, 255, 255);">maroon</div><div class="color-tile" style="background: rgb(102, 205, 170); color: rgb(0, 0, 0);">mediumaquamarine</div><div class="color-tile" style="background: rgb(0, 0, 205); color: rgb(255, 255, 255);">mediumblue</div><div class="color-tile" style="background: rgb(186, 85, 211); color: rgb(255, 255, 255);">mediumorchid</div><div class="color-tile" style="background: rgb(147, 112, 219); color: rgb(255, 255, 255);">mediumpurple</div><div class="color-tile" style="background: rgb(60, 179, 113); color: rgb(255, 255, 255);">mediumseagreen</div><div class="color-tile" style="background: rgb(123, 104, 238); color: rgb(255, 255, 255);">mediumslateblue</div><div class="color-tile" style="background: rgb(0, 250, 154); color: rgb(0, 0, 0);">mediumspringgreen</div><div class="color-tile" style="background: rgb(72, 209, 204); color: rgb(0, 0, 0);">mediumturquoise</div><div class="color-tile" style="background: rgb(199, 21, 133); color: rgb(255, 255, 255);">mediumvioletred</div><div class="color-tile" style="background: rgb(25, 25, 112); color: rgb(255, 255, 255);">midnightblue</div><div class="color-tile" style="background: rgb(245, 255, 250); color: rgb(0, 0, 0);">mintcream</div><div class="color-tile" style="background: rgb(255, 228, 225); color: rgb(0, 0, 0);">mistyrose</div><div class="color-tile" style="background: rgb(255, 228, 181); color: rgb(0, 0, 0);">moccasin</div><div class="color-tile" style="background: rgb(255, 222, 173); color: rgb(0, 0, 0);">navajowhite</div><div class="color-tile" style="background: rgb(0, 0, 128); color: rgb(255, 255, 255);">navy</div><div class="color-tile" style="background: rgb(253, 245, 230); color: rgb(0, 0, 0);">oldlace</div><div class="color-tile" style="background: rgb(128, 128, 0); color: rgb(255, 255, 255);">olive</div><div class="color-tile" style="background: rgb(107, 142, 35); color: rgb(255, 255, 255);">olivedrab</div><div class="color-tile" style="background: rgb(255, 165, 0); color: rgb(0, 0, 0);">orange</div><div class="color-tile" style="background: rgb(255, 69, 0); color: rgb(255, 255, 255);">orangered</div><div class="color-tile" style="background: rgb(218, 112, 214); color: rgb(255, 255, 255);">orchid</div><div class="color-tile" style="background: rgb(238, 232, 170); color: rgb(0, 0, 0);">palegoldenrod</div><div class="color-tile" style="background: rgb(152, 251, 152); color: rgb(0, 0, 0);">palegreen</div><div class="color-tile" style="background: rgb(175, 238, 238); color: rgb(0, 0, 0);">paleturquoise</div><div class="color-tile" style="background: rgb(219, 112, 147); color: rgb(255, 255, 255);">palevioletred</div><div class="color-tile" style="background: rgb(255, 239, 213); color: rgb(0, 0, 0);">papayawhip</div><div class="color-tile" style="background: rgb(255, 218, 185); color: rgb(0, 0, 0);">peachpuff</div><div class="color-tile" style="background: rgb(205, 133, 63); color: rgb(255, 255, 255);">peru</div><div class="color-tile" style="background: rgb(255, 192, 203); color: rgb(0, 0, 0);">pink</div><div class="color-tile" style="background: rgb(221, 160, 221); color: rgb(0, 0, 0);">plum</div><div class="color-tile" style="background: rgb(176, 224, 230); color: rgb(0, 0, 0);">powderblue</div><div class="color-tile" style="background: rgb(128, 0, 128); color: rgb(255, 255, 255);">purple</div><div class="color-tile" style="background: rgb(255, 0, 0); color: rgb(255, 255, 255);">red</div><div class="color-tile" style="background: rgb(188, 143, 143); color: rgb(255, 255, 255);">rosybrown</div><div class="color-tile" style="background: rgb(65, 105, 225); color: rgb(255, 255, 255);">royalblue</div><div class="color-tile" style="background: rgb(139, 69, 19); color: rgb(255, 255, 255);">saddlebrown</div><div class="color-tile" style="background: rgb(250, 128, 114); color: rgb(255, 255, 255);">salmon</div><div class="color-tile" style="background: rgb(244, 164, 96); color: rgb(0, 0, 0);">sandybrown</div><div class="color-tile" style="background: rgb(46, 139, 87); color: rgb(255, 255, 255);">seagreen</div><div class="color-tile" style="background: rgb(255, 245, 238); color: rgb(0, 0, 0);">seashell</div><div class="color-tile" style="background: rgb(160, 82, 45); color: rgb(255, 255, 255);">sienna</div><div class="color-tile" style="background: rgb(192, 192, 192); color: rgb(0, 0, 0);">silver</div><div class="color-tile" style="background: rgb(135, 206, 235); color: rgb(0, 0, 0);">skyblue</div><div class="color-tile" style="background: rgb(106, 90, 205); color: rgb(255, 255, 255);">slateblue</div><div class="color-tile" style="background: rgb(112, 128, 144); color: rgb(255, 255, 255);">slategray</div><div class="color-tile" style="background: rgb(255, 250, 250); color: rgb(0, 0, 0);">snow</div><div class="color-tile" style="background: rgb(0, 255, 127); color: rgb(0, 0, 0);">springgreen</div><div class="color-tile" style="background: rgb(70, 130, 180); color: rgb(255, 255, 255);">steelblue</div><div class="color-tile" style="background: rgb(210, 180, 140); color: rgb(0, 0, 0);">tan</div><div class="color-tile" style="background: rgb(0, 128, 128); color: rgb(255, 255, 255);">teal</div><div class="color-tile" style="background: rgb(216, 191, 216); color: rgb(0, 0, 0);">thistle</div><div class="color-tile" style="background: rgb(255, 99, 71); color: rgb(255, 255, 255);">tomato</div><div class="color-tile" style="background: rgb(64, 224, 208); color: rgb(0, 0, 0);">turquoise</div><div class="color-tile" style="background: rgb(238, 130, 238); color: rgb(255, 255, 255);">violet</div><div class="color-tile" style="background: rgb(245, 222, 179); color: rgb(0, 0, 0);">wheat</div><div class="color-tile" style="background: rgb(255, 255, 255); color: rgb(0, 0, 0);">white</div><div class="color-tile" style="background: rgb(245, 245, 245); color: rgb(0, 0, 0);">whitesmoke</div><div class="color-tile" style="background: rgb(255, 255, 0); color: rgb(0, 0, 0);">yellow</div><div class="color-tile" style="background: rgb(154, 205, 50); color: rgb(0, 0, 0);">yellowgreen</div></div></div></article></section>



































<section><header><h3>实例方法</h3></header><article><h4><code>rgb()</code></h4><p>返回一个存储 RGB 颜色模型的对象，例如 <code>{r: 255, g: 0, b: 255, a: 1}</code>。</p><h4><code>rgb(rgbaColor)</code></h4><p>使用一个对象来使用 RGB 颜色模型重新设定颜色，例如 <code>{r: 255, g: 0, b: 255, a: 1}</code>，其中 <code>a</code> 代表透明度，可以省略，默认为 <code>1</code>.</p><h4><code>hue()</code></h4><p>返回 HSL 颜色模型中的 H 分量。</p><h4><code>hue(hue)</code></h4><p>以 HSL 颜色模型，重新设置 H 分量。</p><h4><code>darken(percent)</code></h4><p>以百分比降低颜色亮度。</p><p><code>percent</code> 参数为整数，表示百分比，取值范围 <code>0 ~ 100</code>。</p><h4><code>lighten(percent)</code></h4><p>以百分比提高颜色亮度。</p><p><code>percent</code> 参数为整数，表示百分比，取值范围 <code>0 ~ 100</code>。</p><h4><code>clone()</code></h4><p>克隆一个当前实例的副本。</p><h4><code>fade(percent)</code></h4><p>设定档期透明度为指定的百分比。</p><p>percent 参数为整数，表示百分比，取值范围 <code>0 ~ 100</code>。</p><h4><code>toHsl()</code></h4><p>返回一个存储 HSL 颜色模型的对象，例如 <code>{h: 350, s: 0.5, l: 0.9, a: 1}</code>。</p><h4><code>luma()</code></h4><p>返回颜色的亮度。</p><h4><code>saturate()</code></h4><p>返回颜色的饱和度。</p><h4><code>contrast(dark, light, threshold)</code></h4><p>返回颜色的对比色，将当前颜色的亮度与指定的阈值进行比较，如果判断为亮色则返回指定的暗色，如果判断为暗色则返回指定的亮色。</p><p>参数：</p><ul>
<li><code>dark</code> 指定当需要返回一个暗色时使用的颜色，默认为 <code>'#000'</code>；</li>
<li><code>light</code>，指定当需要返回一个亮色时使用的颜色，默认为 <code>'#fff'</code>；</li>
<li><code>threshold</code>，判断颜色是否为亮色的阈值，默认为 <code>0.43</code>，取值范围为 <code>0 ~ 1</code>。</li>
</ul><h4><code>hexStr()</code></h4><p>将当前颜色以十六进制字符串返回。</p><h4><code>toCssStr()</code></h4><p>返回当前颜色适合 CSS 的值。</p><h4>调用实例方法</h4><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 创建颜色实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myColor </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="typ">Color</span><span class="pun">(</span><span class="str">'#095823'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 调用实例方法</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myHsl </span><span class="pun">=</span><span class="pln"> myColor</span><span class="pun">.</span><span class="pln">toHsl</span><span class="pun">();</span></code></pre></article></section>











<style>
#zuiColors .color-tile {height: auto; width: 125px; padding: 0 5px; margin: 0; border: none;}
</style>

<script src="__ZUI__/lib/colorset.js/zui.colorset.min.js"></script>
<script>
$(function() {
    var $colors = $('<div class="clearfix"></div>');
    $.each($.zui.colorset, function(name, hex) {
        var color = new $.zui.Color(hex);
        $colors.append($('<div class="color-tile"></div>').css({
            background: hex,
            color: color.contrast().toCssStr()
        }).text(name));
    });
    $('#zuiColors').append($colors);
});
</script>




<section><header><h3>ZUI 配色</h3></header><article><p>ZUI 配色辅助工具允许你使用 JS 代码来获取 ZUI CSS 中定义的颜色（参见 <a href="#basic/colorset"><strong>基础 → 配色</strong></a>）。</p><div class="alert alert-warning">
  <h4>提示</h4>
  <p>ZUI 配色源码由 <a class="alert-link" href="https://github.com/easysoft/zui/blob/master/src/js/color.js" target="_blank">colorset.js</a> 提供，不包含在标准版或简洁版中，你需要引用独立组件文件 <a class="alert-link" href="https://github.com/easysoft/zui/blob/master/dist/lib/colorset.js/zui.colorset.js" target="_blank">lib/zui.colorset.js</a>。</p>
</div><p>ZUI 配色插件为独立组件，你需要从本地或 CDN 单独引入 lib 目录下的资源：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"lib/colorset/zui.colorset.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></pre><h4>获取所有配色</h4><ul>
<li><code>$.zui.colorset</code></li>
</ul><p><code>$.zui.colorset</code> 对象中存储了 ZUI 的所有配色，属性为配色名称，对应的属性值为十六进制颜色字符串。</p><p>ZUI 中所有已定义的配色有：</p><div id="zuiColors" class="example">
<div class="clearfix"><div class="color-tile" style="background: rgb(50, 128, 252); color: rgb(255, 255, 255);">primary</div><div class="color-tile" style="background: rgb(20, 92, 205); color: rgb(255, 255, 255);">secondary</div><div class="color-tile" style="background: rgb(235, 242, 249); color: rgb(0, 0, 0);">pale</div><div class="color-tile" style="background: rgb(53, 53, 53); color: rgb(255, 255, 255);">fore</div><div class="color-tile" style="background: rgb(255, 255, 255); color: rgb(0, 0, 0);">back</div><div class="color-tile" style="background: rgb(34, 34, 34); color: rgb(255, 255, 255);">grayDarker</div><div class="color-tile" style="background: rgb(51, 51, 51); color: rgb(255, 255, 255);">grayDark</div><div class="color-tile" style="background: rgb(128, 128, 128); color: rgb(255, 255, 255);">gray</div><div class="color-tile" style="background: rgb(221, 221, 221); color: rgb(0, 0, 0);">grayLight</div><div class="color-tile" style="background: rgb(229, 229, 229); color: rgb(0, 0, 0);">grayLighter</div><div class="color-tile" style="background: rgb(241, 241, 241); color: rgb(0, 0, 0);">grayPale</div><div class="color-tile" style="background: rgb(255, 255, 255); color: rgb(0, 0, 0);">white</div><div class="color-tile" style="background: rgb(0, 0, 0); color: rgb(255, 255, 255);">black</div><div class="color-tile" style="background: rgb(234, 100, 74); color: rgb(255, 255, 255);">red</div><div class="color-tile" style="background: rgb(241, 163, 37); color: rgb(0, 0, 0);">yellow</div><div class="color-tile" style="background: rgb(56, 176, 63); color: rgb(255, 255, 255);">green</div><div class="color-tile" style="background: rgb(3, 184, 207); color: rgb(255, 255, 255);">blue</div><div class="color-tile" style="background: rgb(134, 102, 184); color: rgb(255, 255, 255);">purple</div><div class="color-tile" style="background: rgb(189, 123, 70); color: rgb(255, 255, 255);">brown</div><div class="color-tile" style="background: rgb(221, 244, 223); color: rgb(0, 0, 0);">greenPale</div><div class="color-tile" style="background: rgb(255, 240, 213); color: rgb(0, 0, 0);">yellowPale</div><div class="color-tile" style="background: rgb(255, 229, 224); color: rgb(0, 0, 0);">redPale</div><div class="color-tile" style="background: rgb(221, 243, 245); color: rgb(0, 0, 0);">bluePale</div><div class="color-tile" style="background: rgb(247, 235, 225); color: rgb(0, 0, 0);">brownPale</div><div class="color-tile" style="background: rgb(245, 238, 255); color: rgb(0, 0, 0);">purplePale</div><div class="color-tile" style="background: rgb(255, 255, 255); color: rgb(0, 0, 0);">light</div><div class="color-tile" style="background: rgb(53, 53, 53); color: rgb(255, 255, 255);">dark</div><div class="color-tile" style="background: rgb(56, 176, 63); color: rgb(255, 255, 255);">success</div><div class="color-tile" style="background: rgb(241, 163, 37); color: rgb(0, 0, 0);">warning</div><div class="color-tile" style="background: rgb(234, 100, 74); color: rgb(255, 255, 255);">danger</div><div class="color-tile" style="background: rgb(3, 184, 207); color: rgb(255, 255, 255);">info</div><div class="color-tile" style="background: rgb(189, 123, 70); color: rgb(255, 255, 255);">important</div><div class="color-tile" style="background: rgb(134, 102, 184); color: rgb(255, 255, 255);">special</div><div class="color-tile" style="background: rgb(221, 244, 223); color: rgb(0, 0, 0);">successPale</div><div class="color-tile" style="background: rgb(255, 240, 213); color: rgb(0, 0, 0);">warningPale</div><div class="color-tile" style="background: rgb(255, 229, 224); color: rgb(0, 0, 0);">dangerPale</div><div class="color-tile" style="background: rgb(221, 243, 245); color: rgb(0, 0, 0);">infoPale</div><div class="color-tile" style="background: rgb(247, 235, 225); color: rgb(0, 0, 0);">importantPale</div><div class="color-tile" style="background: rgb(245, 238, 255); color: rgb(0, 0, 0);">specialPale</div><div class="color-tile" style="color: rgb(255, 255, 255);">get</div></div></div><h4>获取配色实例</h4><ul>
<li><code>$.zui.colorset.get(name)</code></li>
</ul><p>根据配色名称获取类型为 <code>$.zui.Color</code> 的实例。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">var</span><span class="pln"> zuiPrimaryColor </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">zui</span><span class="pun">.</span><span class="pln">colorset</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'primary'</span><span class="pun">);</span><span class="pln">
console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'ZUI primary color is'</span><span class="pun">,</span><span class="pln"> zuiPrimaryColor</span><span class="pun">.</span><span class="pln">toCssStr</span><span class="pun">());</span></code></pre></article></section></div>
</section>
{/block}